<template >
     <div id="divPosition">
        <span class="navigation">
            <!-- 第一种写法 params传参-->
            <!-- <RouterLink to="/news/details/哈哈1/呵呵/嘿嘿" >点击1</RouterLink> -->
            <br>
            <!-- 第一种写法 params传参-->
            <!-- <RouterLink :to="`/news/details/${'哈哈2'}/${'呵呵'}/${'嘿嘿'}`" >点击2</RouterLink> -->
            <br>
            <!-- 第二种和第三种写法 query传参-->
             <RouterLink :to="{
                name: 'news', query: {
                id:'哈哈3',
                x: '呵呵',
                y:'嘿嘿'
             } }">点击3</RouterLink>
        </span>
        <span class="content"><RouterView/></span>
    </div>
</template>

<script lang="ts">
export default {
    name:'News'
}
</script>

<script setup lang="ts">
import { RouterView } from 'vue-router';
let newsList = [{ id: 1, title: '一只狗', content: '漂亮小狗狗' },
            { id: 2, title: '震惊', content: '哈哈哈' }]
</script>

<style lang="css">
    #divPosition{
        display: flex;
    }
    .navigation{
        border: 1px solid black;
        width: 100px;
        height: 400px;
        background-color: blanchedalmond;
        margin-top: 50px;
         margin-left: 20px;
         margin-right: 20px;
    }
    .navigation li{
        margin-left: 20px;
    }
    .content{
        border: 1px solid black;
        width: 400px;
        height: 400px;
        margin-top: 50px;
    }
</style>